<template>
	<view class="flex-col relative page" :style="{ 'padding-top': top + 'px' }" >
			<view  class=" h-46 flex   f-j-s"  style="flex-shrink:initial ;box-sizing:content-box	" >
						<view @click="back(1)" class="flex f-a-c f-s-0 padding-lr10 van-icon van-icon-arrow-left f20-size"></view>
		
		
						<view class="flex f-a-c f-s-0 padding-lr10 f20-size">我的订单(商家)</view>
						<view class="flex   " >
						
							<!-- <text  @click="go('/pages/search/list?shopId='+id)" class="flex f-s-0 f-a-c padding-lr6 van-icon van-icon-search f20-size"></text> -->
							<!-- <view @tap.stop="toshare"  class="flex f-a-c f-j-c padding-lr5 van-icon van-icon-share-o f20-size"></view> -->
							<view @click="$refs.menuBtn.open()" class="flex f-s-0 f-a-c padding-lr10 van-icon van-icon-weapp-nav f20-size" style="position:relative">
								<text v-if="chatLen > 0"
										class="flex f-a-c f-j-c box-b f11-size t-color-w bg-color-r wrap-len b-radius padding-lr2 "
									style="font-size: 9px; min-width: 16px; height: 16px; position: absolute; top: 5%; left: 20%; white-space: nowrap;">{{chatLen}}</text>
							</view>
						</view>
		
						<!-- #ifdef MP-WEIXIN -->
							<xcx-header></xcx-header>
						<!-- #endif -->
				
			
		</view>
					<menu-btn ref="menuBtn" :url="currentUrl" title="我的托运订单" img=""></menu-btn>
		<!-- <view class="flex-col pos_3">
			<text class="font_3 text_4 ">我的订单(商家端)</text>
		</view> -->
		
		<scroll-view class="padding-12 safe-area bg-color-f7" @scrolltolower="loadList" scroll-y="true"
			style="height: 100%; ">
			<view v-if="list.length <= 0" class="flex f-a-c f-j-c f-c">
				<view class="padding-30"></view>
				<no-data></no-data>
			</view>
			
			<view class="flex-col list-item section space-y-14"
				@click="go('/pages/ys/order/detail?orderNo='+item.orderNo)" v-for="(item, index) in list" :key="index">
				<view class="flex-row justify-between items-end">
					<view class="flex-row items-center">
						<view class="flex-col justify-start items-center shrink-0 text-wrapper"
							v-if="item.urgentStatus == 1">
							<text class="font_4 text_5">加急</text>
						</view>
						<text class="font_1 text_6">{{item.sendCity }}</text>
						<image class="shrink-0 image_7"
							src="https://qiniu.ccchongya.com/chongya/images/16947555379102027670.png" />

						<text class="font_1 text_7">{{item.receiveCity }}</text>
					</view>
					<text class="font_4 text_8">发布时间：{{item.buyTime }}</text>
				</view>
				<view class="flex-row justify-between items-center group_4">
					<text class="font_3" v-if="item.status == 0">待确认</text>
					<text class="font_3" v-else-if="item.status == 1">待付款</text>
					<text class="font_3" v-else-if="item.status == 2">确认,已付款</text>
					
					
					
					<text class="font_3" v-else-if="item.status == 3">拖运中</text>
					<text class="font_3" v-else-if="item.status == 4">已送达</text>
					<text class="font_3" v-else-if="item.status == 5">退款</text>
					<text class="font_3" v-else-if="item.status == 6">部分退款</text>
					<text class="font_3" v-else-if="item.status == 7">已取消</text>
					<text class="font_3" v-else-if="item.status == 9">已完成</text>
					
					
					
					<text class="font_3" v-if="item.refundStatus == 1">退款中</text>
					<text class="font_3" v-else-if="item.refundStatus == 2">部分退款</text>
					<text class="font_3" v-else-if="item.refundStatus == 3">已退款</text>
					<text class="font_3" v-else></text>
					
					<text class="font_3"  style="color:#ff0000;font-size:28rpx;font-weight:bold" v-if="item.status == 2">请及时发货</text>
					
					<!-- <text class="font_3" v-if="item.status == 8">已完成</text> -->
					<text class="font_5 text_9 text_10" v-if="item.shopName"> {{item.shopName}}</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
		import petData from '@/config/petData.config.js';
	const API = require('@/utils/api/tyOrder.js').default;
	const $ = require('@/utils/api.js');
	export default {
		components: {},
		props: {},
		data() {
			return {
					currentUrl: '',
chatLen:0,
				top: uni.getStorageSync('bartop') ? uni.getStorageSync('bartop') : 0,
				petcatArray:petData.petcatArray,
				petTypeArray: petData.petTypeArray,
				petVolumeArray: petData.petVolumeArray,
				cageSizeArray: petData.cageSizeArray,
				shuttleArray: petData.shuttleArray,
				haulMethodArray: petData.haulMethodArray,
				addServiceMethodArray:petData.addServiceMethodArray,
				petGenderArray:petData.petGenderArray,
				petMedicineArray: petData.petMedicineArray,
				petStatusArray:	petData.petStatusArray,
				shuttleArray: petData.shuttleArray,
				pinxiangArray: petData.pinxiangArray,
				list: [],
				totalPage: 1,
				page: 1,
				pageSize: 20,
			};
		},
		mounted() {
			this.getList();
		},
		onShow(){
			this.$nextTick(() => {
				this.chatLen =	uni.getStorageSync('chatLen');
				console.log("this.chatLen",this.chatLen)
			});
			   this.currentUrl = `${this.$mConfig.hostUrl}/pages/ys/order/myChase?inviteCode=`+getApp().globalData.inviteCode;
		},
		methods: {
			toshare() {
				console.log("111");
				let url =  `${this.$mConfig.hostUrl}/pages/ys/order/myChase`;
			  // #ifdef H5
			  if (this.$mPayment.isWechat()) {
			    this.shareClass = 'show';
			  } else {
			    this.$mHelper.h5Copy(this.url);
			  }
			  // #endif
			  // #ifdef APP-PLUS
				this.$mHelper.handleAppShare(url, this.appName, this.shop.name, this.shop.cover);
			// #endif
			},
			loadList() {
				if (this.page < this.totalPage) {
					this.page += 1;
					this.getList();
				}
			},
			getList() {
				let self = this;
				$.ajax({
					url: API.getMyChaseOrderListApi,
					data: {
						page: self.page,
						pageSize: self.pageSize
					},
					method: 'GET',
					success(res) {
						if (!res.data.list) {
							self.list = [];
							return;
						}
						let list = [];
						if (self.page != 1) {
							list = self.list.concat(res.data.list);
						} else {
							list = res.data.list ? res.data.list : [];
						}




						let newlist = [];
						if(list.length > 0) {
							list.forEach((item,index) => {
								// ele.moduleData = JSON.parse(ele.moduleData);
								// if(ele.moduleKey == 'goods') {//商品分类
								// 	ele.moduleData.list.forEach((ele1,idx1) => {
								// 		ele1['cateIndex'] = 0;
								// 	})
								// }

								var petType_arr = [];
								var petTypes=item.petType.split(",")
								for (let i = 0; i < petTypes.length; i++) {
										for (let j = 0; j < self.petcatArray.length; j++) {
												if(self.petcatArray[j].id==petTypes[i]){
														petType_arr.push(self.petcatArray[j].title)
														continue;
												}
										}
								}
								item.petType = petType_arr.join(",")



								item.petVolume = self.petVolumeArray[item.petVolume]
								item.cageSize = self.cageSizeArray[item.cageSize]
								// item.shuttle = self.shuttleArray[item.shuttle]
								// item.haulMethod = self.haulMethodArray[item.haulMethod]
								// item.addServiceMethod = self.addServiceMethodArray[item.shuttle]




								item.petPhoto=item.petPhoto.split(",")
								item.cagePhoto=item.cagePhoto.split(",")



								newlist.push(item);
							})
						}



						self.list = newlist;

						self.totalPage = res.data.totalPage;
					}
				})
			}
		},
	};
</script>

<style scoped lang="css">
	@import url('../../../static/css/style.css');
	view {  flex-shrink: 0;	}
	.page {
		background-color: #f7f9f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.font_1 {
		font-size: 24rpx;
		line-height: 23rpx;
		color: #081329;
	}

	.group_2 {
		padding-top: 28rpx;
		overflow-y: auto;
	}

	.group_3 {
		padding: 0 18rpx;
	}

	.image_6 {
		width: 708rpx;
		height: 208rpx;
	}

	.font_3 {
		font-size: 32rpx;
		font-family: HarmonyOSSansSC;
		/* line-height: 30rpx; */
		color: #000000;
	}

	.text_4 {
		font-weight: 700;
	}

	.pos_3 {
		padding: 0 32rpx;
	}

	.list-item {
		margin-right: 6rpx;
	}

	.section {
		padding: 24rpx 12rpx 32rpx 28rpx;
		border-radius: 10rpx;
		background-image: url('https://qiniu.ccchongya.com/chongya/images/16947555416477511668.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.space-y-14 {
		margin-top: 16rpx;
	}

	.space-y-14>view:not(:first-child),
	.space-y-14>text:not(:first-child),
	.space-y-14>image:not(:first-child) {
		margin-top: 28rpx;
	}

	.text-wrapper {
		padding: 8rpx 0;
		background-color: #ffffff94;
		border-radius: 6rpx;
		width: 56rpx;
		height: 38rpx;
	}

	.font_4 {
		font-size: 20rpx;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_5 {
		color: #0b592a;
	}

	.text_6 {
		margin-left: 24rpx;
	}

	.image_7 {
		margin-left: 12rpx;
		width: 42rpx;
		height: 16rpx;
	}

	.text_7 {
		margin-left: 20rpx;
	}

	.text_8 {
		line-height: 20rpx;
	}

	.group_4 {
		padding: 0 8rpx;
	}

	.font_5 {
		font-size: 24rpx;
		font-family: HarmonyOSSansSC;
		line-height: 23rpx;
		color: #081329;
	}

	.text_9 {
		margin-right: 16rpx;
	}

	.text_10 {
		line-height: 22rpx;
	}

	/*
	.equal-division {
		margin-top: 1044rpx;
	}

	.section_3 {
		padding: 24rpx 0;
		background-color: #ffffff;
		overflow: hidden;
	}

	.group_6 {
		flex: 1 1 150rpx;
	}

	.equal-division-item {
		padding: 12rpx 0;
	}

	.space-y-4>view:not(:first-child),
	.space-y-4>text:not(:first-child),
	.space-y-4>image:not(:first-child) {
		margin-top: 8rpx;
	}

	.image_8 {
		width: 48rpx;
		height: 48rpx;
	}

	.font_6 {
		font-size: 20rpx;
		font-family: HarmonyOSSansSC;
		line-height: 18rpx;
		color: #666e7a;
	}

	.text_14 {
		color: #ffbd52;
	} */
</style>
